<template>
  <div>
    <div class="header-btn" style="margin:20px 20px 0 20px">
      <div>群发客户详情</div>
      <div>
        <el-button plain type="info" @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="text">
      <div class="left">
        <div class="wrap">
          <div class="title-header" style="margin-left: 0">基本信息</div>
          <div>
            <div>群发名称：{{ details.messageName }}</div>
            <div>创建人员：{{ details.createBy }}</div>
            <div>创建时间：{{ details.createTime }}</div>
          </div>
        </div>
        <div class="wrap">
          <div class="title-header" style="margin-left: 0">群发消息</div>
          <div>
            <div>
              群发类型：{{ details.timedTask == 0 ? '立即发送' : details.timedTask == 1 ? '定时发送' : '' }}
            </div>
            <div>发送时间：{{ details.settingTime }}</div>
            <div>
              群发员工：<span style="color: #082aff">{{ details.sendWorker }}</span>
            </div>
            <div>群发对象：群发员工下的所有客户，共{{ total }}人</div>
          </div>
        </div>
        <div class="wrap">
          <div class="title-header" style="margin-left: 0">群发内容</div>
          <div>
            <div class="show-txt">
              <div class="show-txt-title">
                <p>文本内容：</p>
              </div>
              <div class="show-txt-content">{{ details.content }}</div>
            </div>
            <div>
              <span>素材内容：</span>
              <NormalSelectMaterial v-if="operateFlag" :disabled="true" :selectedList="details.messageMaterial"
                                    style="margin: 10px 0 0 20px;"/>
            </div>
            <div style="margin: 10px 0 0 20px;">
              <span>二维码：</span>
              <span v-if="qrCodeForm.activityName" class="seletedCode">
                {{ `${qrCodeForm.qrType == 1 || !qrCodeForm.qrType ? '员工活码' : qrCodeForm.qrType == 2 ? '渠道活码' : '群活码'} : ${qrCodeForm.activityName}` }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="right wrap">
        <div class="title-header">数据统计</div>
        <div>
          <div v-for="(item, index) in statisticsList" :key="index" class="statisticsList-item">
            <div class="answer" style="color: #000!important;">{{ item.answer }}</div>
            <div class="que">{{ item.que }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail wrap">
      <el-tabs v-model="tab" @tab-click="tabChange">
        <el-tab-pane label="员工详情" name="0">
          <div style="display: flex ; justify-content: space-between">
            <div style="margin-left:12px">
              <el-radio-group v-model="selectCustomer" @change="showSelectCustomer">
                <el-radio-button label="9">本次推送全部员工</el-radio-button>
                <el-radio-button label="0">未发送员工</el-radio-button>
                <el-radio-button label="1">已发送员工</el-radio-button>
                <el-radio-button label="2">发送失败</el-radio-button>
              </el-radio-group>
            </div>
            <div style="display: flex ; padding-right: 20px">
              <div style="line-height: 36px ; padding-right: 8px">共{{ total1 }}个</div>
              <div>
                <el-button type="primary" @click="pushRemind">提醒全部员工</el-button>
              </div>
            </div>
          </div>
          <div class="workerDetail">
            <div v-for="(item, index) in workerDetailList" :key="index" class="workerDetailList-Item">
              <div class="workerInfo">
                <el-image :src="item.headImageUrl"></el-image>
                <div style="margin-top: 10px">
                  <div style="margin:8px 0">
                    <span>{{ item.userName }}</span>
                    <el-tag v-if="item.status == '0'" style="margin-left:4px">未发送</el-tag>
                    <el-tag v-if="item.status == '1'" style="margin-left:4px">已发送</el-tag>
                    <el-tag v-if="item.status == '2' || item.status == '3'" style="margin-left:4px">发送失败</el-tag>
                  </div>
                  <div>需推送给{{ item.userNum }}个客户</div>
                </div>
              </div>
              <div>
                <el-button v-if="item.status == '0'" style="margin-right: 12px" type="primary"
                           @click="pushRemind(item)">提醒
                </el-button>
              </div>
            </div>
          </div>
          <el-pagination :current-page.sync="pageNum1" :page-size="pageSize1"
                         :total="total1" layout="total, prev, pager , next , jumper"
                         style="text-align: end ; margin-right: 8px" @size-change="userInfoSizeChange"
                         @current-change="userInfoCurrentChange"></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="客户详情" name="1">
          <el-table v-loading="loading" :data="tableList" height="415" style="width:calc(100% - 24px) ; margin:0 12px">
            <el-table-column align="center" label="序号" type="index" width="55"/>
            <el-table-column align="center" label="姓名" prop="name" show-overflow-tooltip/>
            <el-table-column align="center" label="手机" prop="phone" show-overflow-tooltip/>
            <el-table-column align="center" label="邮箱" prop="email" show-overflow-tooltip/>
            <el-table-column align="center" label="微信号" prop="wechatNo" show-overflow-tooltip/>
            <el-table-column align="center" label="微信昵称" prop="wechatNickname" show-overflow-tooltip/>
            <el-table-column align="center" label="性别" prop="gender" show-overflow-tooltip>
              <template slot-scope="{ row }">
                <div>
                  <div>{{ row.gender == '1' ? '男' : row.gender == '2' ? '女' : '' }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="标签" prop="weTagGroupId" show-overflow-tooltip/>
            <el-table-column align="center" label="发送状态" prop="status" show-overflow-tooltip>
              <template slot-scope="{ row }">
                <div>
                  <div v-if="row.status == '0'">未发送</div>
                  <div v-if="row.status == '1'">已发送</div>
                  <div v-if="row.status == '2' || row.status == '3'">发送失败</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="失败原因" prop="sendTime" show-overflow-tooltip>
              <template slot-scope="{ row }">
                <div>
                  <div v-if="row.status == '2'">非好友</div>
                  <div v-if="row.status == '3'">已达上限</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="执行时间" prop="settingTime" show-overflow-tooltip width="180"/>
            <el-table-column align="center" label="执行员工" prop="userName" show-overflow-tooltip/>
          </el-table>
          <el-pagination
            :current-page.sync="pageNum"
            :page-size.sync="pageSize"
            :page-sizes="[20, 30, 50]"
            :total="total"
            class="table-page"
            layout="total,sizes,prev,pager,next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {customerInfo, pushInfo, pushRemind, userInfo} from '@/api/dispatchCustomer'
import {timeChange} from '@/api/getNowTime'

export default {
  name: 'DispatchCustomerDetails',
  data() {
    return {
      //数据统计列表
      statisticsList: [
        {
          id: 'sendUser',
          que: '已发送员工',
          answer: '0',
        },
        {
          id: 'notSendUser',
          que: '未发送员工',
          answer: '0',
        },
        {
          id: 'sendCustomer',
          que: '已发送客户',
          answer: '0',
        },
        {
          id: 'notSendCustomer',
          que: '未发送客户',
          answer: '0',
        },
        {
          id: 'sendLimit',
          que: '发送失败（已达上限）',
          answer: '0',
        },
        {
          id: 'sendFail',
          que: '发送失败（非好友）',
          answer: '0',
        },
      ],
      //详情tab栏
      tab: 0,
      selectCustomer: 9, //客户详情tab栏选中项
      tableList: [],
      total: 0,
      pageNum: 1,
      pageSize: 20,
      mediaContentDetails: [], //素材内容
      noshow: false, //素材组件内容不展示
      //员工详情tabs栏列表数据
      workerDetailList: [],
      //页面展示字段
      details: {
        messageName: '',
        createBy: '',
        createTime: '',
        timedTask: '',
        settingTime: '',
        sendWorker: '',
        content: '',
      },
      loading: false,
      //员工详情分页
      total1: 0,
      pageNum1: 1,
      pageSize1: 5,
      editCodeInfo: {},
      qrCodeForm: {},
      operateFlag: ''
    }
  },
  methods: {
    //客户详情tab栏选中项变化
    showSelectCustomer() {
      this.userInfo()
    },

    //返回
    goBack() {
      this.$router.push({
        name: 'DispatchCustomer',
        query: {
          activeName: this.$route.query.activeName,
        },
      })
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.customerInfo();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.customerInfo();
    },

    //页面初始化获取信息
    getDetails() {
      pushInfo({messageId: this.$route.query.messageId})
        .then((res) => {
          console.log(res, '@@@@@@@@@@@@@@@@@@@@')
          if (res.code == 200) this.details = res.data
          if (res.data.sendWeUsers) {
            this.details.sendWorker = ''
            res.data.sendWeUsers.forEach((item) => {
              this.details.sendWorker =
                this.details.sendWorker + item.userName + ','
            })
            this.details.sendWorker =
              this.details.sendWorker.substring(
                this.details.sendWorker.length - 1
              ) == ','
                ? this.details.sendWorker.substring(
                  0,
                  this.details.sendWorker.length - 1
                )
                : this.details.sendWorker
          }
          this.statisticsList.forEach((item) => {
            item.answer = res.data[item.id]
          })
          if (res.data.codeState === '0') {
            this.qrCodeForm = res.data.messageCode[0]
          }
          this.operateFlag = 'DETAIL'
        })
      this.userInfo()
      this.customerInfo()
    },

    //获取员工详情
    userInfo() {
      let status = ''
      status = String(this.selectCustomer) === '9' ? '' : this.selectCustomer
      let params = {
        messageId: this.$route.query.messageId,
        status: status,
        pageSize: this.pageSize1,
        pageNum: this.pageNum1,
      }
      userInfo(params)
        .then((res) => {
          this.workerDetailList = []
          if (res.code === 200) {
            this.workerDetailList = res.rows
            this.total1 = res.total
          }
        })
        .catch((res) => {
        })
    },

    //获取客户详情
    customerInfo() {
      let params = {
        messageId: this.$route.query.messageId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      customerInfo(params)
        .then((res) => {
          if (res.code == 200) {
            this.tableList = res.rows
            this.total = res.total
            this.tableList.forEach((item) => {
              if (item.sendTime)
                item.settingTime = timeChange(item.sendTime * 1000)
            })
          }
        })
        .catch(() => {
        })
    },

    userInfoSizeChange() {
    },

    userInfoCurrentChange() {
      this.userInfo()
    },

    //tab 操作栏变化
    tabChange() {
      if (this.tab === '0') this.userInfo()
      if (this.tab === '1') this.customerInfo()
    },

    //提醒全部员工
    pushRemind(val) {
      let sender = ''
      if (val) sender = val.userid
      let data = {
        messageId: this.$route.query.messageId,
        messageName: this.details.messageName,
        settingTime: this.details.settingTime,
        sender: sender,
      }
      pushRemind(data)
        .then((res) => {
          res.code == 200
            ? this.$message.success(res.data)
            : this.$message.error('提醒发送失败！')
        })
        .catch(() => {
        })
    },

    //二维码查看
    viewCode() {
      this.$refs.qrCode.viewCode()
    },
  },
  created() {
    this.getDetails()
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/base.scss';

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.text {
  display: flex;
  width: 100%;

  .left {
    min-width: calc(40% - 20px);

    div {
      background-color: #fff;
      margin: 20px 20px 0;
    }
  }

  .right {
    background-color: #fff;
    min-width: 60%;
    margin: 20px 0 0 0 !important;

    .statisticsList-item {
      width: calc(25% - 20px);
      margin: 16px 0 0 16px;
      background-color: #f8f8f9;
      display: inline-block;
      text-align: center;

      .answer {
        font-size: 36px;
        margin: 22px 0 28px;
      }

      .que {
        font-size: 16px;
        margin: 12px 0 28px;
      }
    }
  }
}

.detail {
  margin: 20px;
  background-color: #fff;
}

.workerDetail {
  margin-top: 20px;
  max-height: 700px;

  .workerDetailList-Item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 12px 12px;
    background-color: #f8f8f9;
    height: 80px;
    line-height: 100%;

    .workerInfo {
      display: flex;

      .el-image {
        width: 60px;
        height: 60px;
        margin: 10px;
      }
    }
  }
}

.show-txt {
  display: flex;

  .show-txt-title {
    p {
      white-space: nowrap !important;
    }

    margin: 0 !important;
  }

  .show-txt-content {
    margin: 0 !important;
    max-width: 420px;
    word-break: break-all !important;
  }
}

.seletedCode {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2a2a2a;
  margin: 0 !important;
  display: inline-block;
}

.table-page {
  text-align: right;
  margin-top: 20px;
}
</style>
